<template>
  <div>
    <el-dialog title="修改文章" :visible.sync="dialogFormVisible2">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="文章题目">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="文章类型" label-width="80px">
          <el-select v-model="form.kind" placeholder="请选择文章类型">
            <el-option v-for="k in AllKinds" :label="k.name" :value="k.id" v-if="k.id>0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="文章描述" label-width="80px" placeholder="可为空">
          <el-input v-model="form.summary"></el-input>
        </el-form-item>
        <el-form-item label="文章封面" label-width="80px">
          <el-upload
              class="upload-demo"
              action="https://copyctrl.top:8089/file/dynamic"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              multiple
              :limit="1"
              :on-exceed="handleExceed"
              :on-success="getPath"
              :file-list="fileList">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="文章配图" label-width="80px">
          <el-upload
              class="upload-demo"
              action="https://copyctrl.top:8089/file/dynamic"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              multiple
              :limit="1"
              :on-exceed="handleExceed"
              :on-success="getPath2"
              :file-list="fileList2">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="文章内容">
          <el-input type="textarea" v-model="form.body"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false,form={}">取 消</el-button>
        <el-button type="primary" @click="update">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
        title="删除文章"
        :visible.sync="deleteDialog"
        width="30%"
        :before-close="cancelDelete">
      <span>确定删除文章吗，删除成功后会以通知形式反馈给作者</span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="cancelDelete">取 消</el-button>
    <el-button type="primary" @click="handleDelete">确 定</el-button></span>
    </el-dialog>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane v-for="kind in AllKinds" :key="kind.id" :label="kind.name" :name="kind.id.toString()">
        <el-row>
          <el-col :span="2">
            <div class="grid-content bg-purple"> &nbsp;</div>
          </el-col>
          <el-col :span="20">
            <div class="grid-content bg-purple-light" v-for="passage in AllPassages" :key="passage.id">
              <el-descriptions :column="4" border>
                <el-descriptions-item label="标题">{{ passage.title }}</el-descriptions-item>
                <el-descriptions-item label="描述">{{ passage.summary }}</el-descriptions-item>
                <el-descriptions-item label="封面配图" :span="20">
                  <div class="demo-image">
                    <div class="block">
                      <el-image
                          style="width: 100px; height: 100px"
                          :src="'https://fileapi.ems.copyctrl.top/data/upload/images/'+passage.pic"
                          fit="contain"></el-image>
                    </div>
                  </div>
                </el-descriptions-item>
                <el-descriptions-item label="操作文章">
                  <el-link type="success" @click="gotoDetail(passage.id)" style="margin-right: 6px">查看</el-link>
                  <el-link type="info" @click="showUpdate(passage)" style="margin-right: 6px">修改</el-link>
                  <el-link type="danger" @click="showDelete(passage)" style="margin-right: 6px">删除</el-link>
                </el-descriptions-item>
                <el-descriptions-item label="发布时间">{{ passage.createTime }}</el-descriptions-item>
              </el-descriptions>
              <el-divider></el-divider>
            </div>
          </el-col>
          <el-col :span="2">
            <div class="grid-content bg-purple"></div>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import axios from "axios";
import {mapState} from 'vuex'

export default {
  name: "allPassages",
  data() {
    return {
      AllPassages: [],
      activeName: '0',
      AllKinds: [{
        id: 0,
        name: "全部"
      }],
      deleteDialog: false,
      deletePassage: '',
      dialogFormVisible2: false,
      form: {},
      fileList: [],
      fileList2: [],
      temp:{}
    }
  },
  methods: {
    update() {
      const passage = JSON.stringify({
        createTime:this.form.createTime,
        id:this.form.id,
        title: this.form.title,
        body: this.form.body,
        kind: this.form.kind,
        pic: this.form.pic,
        picBody: this.form.picBody,
        summary: this.form.summary,
        hot:this.form.hot
      });
      axios.put(`/api/admin/passage`, {"passage": passage,"old":JSON.stringify(this.temp)}).then(
          response => {
            if (response.data.code == 200) {
              console.log(this.temp)
              this.$message({
                message: '修改成功',
                type: 'success'
              });
              this.dialogFormVisible2 = false
              this.form = {
                title: '',
                body: ''
              }
              this.$router.go(0)
              location.reload()
            } else {
              this.$message.error(response.data.errorMsg);
            }
          },
          error => {
            //请求失败
            this.$message.error('服务繁忙');
          }
      )
    },
    getPath(response, file, fileList) {
      this.form.pic = response.data
      console.log(this.form)
    },
    getPath2(response, file, fileList) {
      this.form.picBody = response.data
      console.log(this.form)
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleDelete() {
      axios.post(`/api/admin/passage/delete`,
          {"passage": JSON.stringify(this.deletePassage)}).then(
          response => {
            if (response.data.code == 200) {
              this.$message({
                message: '删除成功',
                type: 'success'
              });
              this.deletePassage = {}
              this.deleteDialog = false
              this.$router.go(0)
              location.reload()
            } else {
              this.$message.error('服务繁忙');
            }
          },
          error => {
            this.$message.error('服务繁忙');
            //请求失败
          }
      )
    },
    cancelDelete() {
      this.deleteDialog = false
      this.deletePassage = {}
    },
    showUpdate(passage) {
      this.temp=passage
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      axios.get(`/api/admin/passage/detail/` + passage.id, {}).then(
          response => {
            if (response.data.code == 200) {
              this.form = response.data.data.passage
              this.fileList = this.fileList.concat(this.form.pic)
              this.fileList2 = this.fileList2.concat(this.form.picBody)
              loading.close();
              this.dialogFormVisible2 = true
            } else {
              loading.close();
              this.$message.error(response.data.errorMsg);
            }
          },
          error => {
            //请求失败
            loading.close();
            this.$message.error('服务繁忙');
          }
      )

    },
    showDelete(id) {
      this.deleteDialog = true
      this.deletePassage = id
    },
    gotoDetail(pid) {
      this.$router.push({path: '/passageDetail', query: {id: pid}})
    },
    handleClick(tab, event) {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      var id = tab.name;
      if (id == "0") {
        this.getAllPassage(loading)
      } else {
        this.getPassagesById(id, loading)
      }
    },
    //获取全部类型
    getAllKind() {
      axios.get(`/api/admin/passage/kind/all`).then(
          response => {
            if (response.data.code == 200) {
              this.AllKinds = this.AllKinds.concat(response.data.data)
              console.log(this.AllKinds)
            } else {
              this.$message.error('服务繁忙');
            }
          },
          error => {
            this.$message.error('服务繁忙');
            //请求失败
          }
      )
    },
    //获取所有文章
    getAllPassage(loading) {
      axios.get(`/api/admin/passage/all`).then(
          response => {
            if (response.data.code == 200) {
              loading.close();
              this.AllPassages = response.data.data
            } else {
              loading.close();
              this.$message.error('服务繁忙');
            }
          },
          error => {
            loading.close();
            this.$message.error('服务繁忙');
            //请求失败
          }
      )
    },
    getPassagesById(id, loading) {
      axios.get(`/api/admin/passage/kind/` + id).then(
          response => {
            if (response.data.code == 200) {
              this.AllPassages = response.data.data
              loading.close();
            } else {
              this.$message.error('服务繁忙');
              loading.close();
            }
          },
          error => {
            loading.close();
            this.$message.error('服务繁忙');
            //请求失败
          }
      )
    }
  },
  computed: {
    ...mapState('userOptions', ['user', 'token'])
  },
  mounted() {
    const loading = this.$loading({
      lock: true,
      text: 'Loading',
      spinner: 'el-icon-loading',
      background: 'rgba(0, 0, 0, 0.7)'
    });
    //获取全部类型
    this.getAllKind()
    //获取全部文章
    this.getAllPassage(loading)
  },
}
</script>

<style scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.box-card {
  width: 480px;
}
</style>
